<template>
  <div id="Scroll" class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
//滚动组件
import BScroll from 'better-scroll'
export default {
  name: "Scroll",
  data() {
    return {
      scroll: null
    }
  },
  //接收父组件传值
  props: {
    probeType: { //定义一个变量储存滚动组件是否要实时监听滚动
      type: Number,
      default: 0
    },
    pullUpLoad: {//定义一个变量储存滚动组件是否要实时监听上拉事件
      type: Boolean,
      default: false
    }
  },
  //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  mounted() {
    //对scroll进行初始化
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true, //这个属性设置为true 滚动组件里面的内容点击事件才能触发
      //配置probeType属性才能实时的监听滚动的位置
      //probeType: 3
      probeType: this.probeType,
      //pullUpLoad用于控制是否要监听上拉加载
      pullUpLoad: this.pullUpLoad
    })
    //返回顶部的方法
    //this.scroll.scrollTo(0,0)
    //监听滚动位置
    this.scroll.on('scroll',(position) => {
      //利用emit向父组件传输滚动坐标
      this.$emit('scroll',position)
    })
    //监听上拉事件 上拉加载更多
    this.scroll.on('pullingUp',() => {
      //利用emit向父组件传递
      this.$emit('pullingUp')
    })
  },
  //订单方法
  methods: {
    //返回顶部
    scrollTo(x, y, time=300) {
      this.scroll.scrollTo(x,y,time)
    },
    //上拉加载更多
    finishPullUp() {
      //滚动组件当调用过一次上拉加载更多方法以后，
      //如果不重新调用finishPullUp方法,那么就会不在执行上拉加载更多方法
      this.scroll.finishPullUp()
    },
    //刷新滚动组件高度
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    //获取滚动y坐标
    getScrollY() {
      return this.scroll ? this.scroll.y : 0
    }

  }
}
</script>

<style scoped>
</style>
